<template>
    <div class="dispatch-view">
        <!-- 加载状态 -->
        <el-loading v-loading="loading" text="正在获取派单信息..."></el-loading>

        <!-- 派单基本信息卡片 -->
        <el-card class="info-card" v-if="!loading">
            <div slot="header" class="card-header">
                <span>派单基本信息</span>
            </div>

            <div class="info-grid">
                <div class="info-item">
                    <label class="info-label">工单号：</label>
                    <span class="info-value">{{ dispatchData.workOrderCode || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">生产指令编号：</label>
                    <span class="info-value">{{ dispatchData.orderCode || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">派单人：</label>
                    <span class="info-value">{{ dispatchData.dispatchPerson || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">接单人员：</label>
                    <span class="info-value">{{ dispatchData.receivePerson || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">派单时间：</label>
                    <span class="info-value">{{ dispatchData.dispatchTime || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">接单时间：</label>
                    <span class="info-value">{{ dispatchData.receiveTime || '-' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">派单状态：</label>
                    <span class="info-value status-tag" :class="statusClass">{{ statusText }}</span>
                </div>
            </div>
        </el-card>

        <!-- 异常信息卡片 -->
        <el-card class="info-card exception-card" v-if="!loading">
            <div slot="header" class="card-header">
                <span>异常信息</span>
            </div>

            <div class="exception-content">
                <div class="info-item">
                    <label class="info-label">异常原因：</label>
                    <span class="info-value exception-reason">{{ dispatchData.rejectReason || '无异常原因描述' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">备注说明：</label>
                    <span class="info-value">{{ dispatchData.remark || '无备注' }}</span>
                </div>
                <div class="info-item">
                    <label class="info-label">最后更新时间：</label>
                    <span class="info-value">{{ dispatchData.updateTime || '-' }}</span>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getDispatchByOrderCode } from '@/api/product/dispatch'

export default {
    name: 'DispatchView',
    props: {
        orderCode: {
            type: String,
            required: true,
            default: ''
        }
    },
    data() {
        return {
            dispatchData: {},
            loading: true
        }
    },
    computed: {
        statusText() {
            const statusMap = { 0: '未派单', 1: '待接单', 2: '已接单', 3: '已完成', 4: '有异常' }
            return statusMap[this.dispatchData.dispatchStatus] || '未知状态'
        },
        statusClass() {
            return this.dispatchData.dispatchStatus === 4 ? 'status-exception' : ''
        }
    },
    // 新增：组件挂载时强制查询（即使watch没触发）
    mounted() {
        console.log('DispatchView挂载，接收的orderCode：', this.orderCode); // 日志：验证接收值
        if (this.orderCode) {
            this.getDispatchInfo(); // 强制调用接口
        }
    },
    watch: {
        orderCode: {
            immediate: true,
            handler(newVal, oldVal) {
                console.log('orderCode变化：', oldVal, '→', newVal); // 日志：监控变化
                if (newVal && newVal !== oldVal) { // 确保值有效且变化时调用
                    this.getDispatchInfo();
                } else if (newVal && newVal === oldVal) {
                    // 值相同但可能没调用时，强制触发
                    this.getDispatchInfo();
                }
            }
        }
    },
    methods: {
        getDispatchInfo() {
            console.log('开始调用接口，参数orderCode：', this.orderCode); // 日志：确认接口调用时机
            this.loading = true;
            // 直接打印接口调用语句，验证是否执行到这一步
            console.log('接口请求：getDispatchByOrderCode(' + this.orderCode + ')');

            // 调用接口（添加完整的错误捕获）
            getDispatchByOrderCode(this.orderCode)
                .then(response => {
                    console.log('接口返回结果：', response); // 日志：查看接口响应
                    if (response.code === 200) {
                        this.dispatchData = response.data || {};
                    } else {
                        this.$message.error('获取派单信息失败：' + (response.msg || '未知错误'));
                        this.dispatchData = {};
                    }
                })
                .catch(error => {
                    console.error('接口调用失败：', error); // 日志：打印错误详情
                    this.$message.error('接口请求失败，请检查网络或接口地址');
                    this.dispatchData = {};
                })
                .finally(() => {
                    this.loading = false;
                });
        }
    }
}
</script>

<style scoped>
/* 样式保持不变 */
.dispatch-view {
    padding: 10px 0;
}

.info-card {
    margin-bottom: 15px;
    border-radius: 6px;
}

.card-header {
    font-size: 15px;
    font-weight: 500;
    color: #1f2329;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 5px 0;
}

.exception-card .info-grid,
.exception-content {
    grid-template-columns: 1fr;
}

.info-item {
    display: flex;
    padding: 5px 0;
    align-items: flex-start;
}

.info-label {
    font-weight: 500;
    color: #606266;
    min-width: 100px;
    line-height: 1.5;
}

.info-value {
    flex: 1;
    color: #303133;
    line-height: 1.5;
    word-break: break-all;
}

.status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.status-exception {
    background-color: #fff2e8;
    color: #fa541c;
    border: 1px solid #ffd8bf;
}

.exception-reason {
    color: #fa541c;
    padding: 8px 10px;
    background-color: #fff2e8;
    border-radius: 4px;
    border-left: 3px solid #fa541c;
}
</style>